﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Ajax-jQuery实践</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
.odd{background: #f00;}
.even{background:#ccc;}
</style>
</head>
<body>
<div class="container-xl a1">
<h1>jquery之Ajax</h1>
<h2>load页面</h2>
<input type="button" value="载入页面" id="b1">
<div id="loads"></div>
</div>


<hr>
<div class="container-xl">
<input type="button" value="操作背景颜色" id="btn1">    
<div class="zoo">逐浪软件</div>
<div class="zoo">中国最优CMS</div>
</div>

<hr>
<div class="container-xl">
<input type="button" value="调用json数据" id="btn2">    
<div id="jsons"></div>


</div>







<script>
$(document).ready(function () {
    $(`#b1`).click(function () {
        $(`#loads`).load(`016-jQuery@002.html #testp`);
    })
})

//调用js文件
$(document).ready(function () {
    $.getScript(`test.js`,function () {
        $(`#btn1`).click(function () {
            // $(`.zoo`).css(`backgroundColor`,`red`);
            // $(`.zoo`).css(`font-size`,`30rem`);
            $(`.zoo`).addClass(`bg-info`).css(`font-size`,`120px`);
        })
    })
})

//调用json文件
$(document).ready(function () {
    $(`#btn2`).click(function () {
        $.getJSON("test.json",function (datas) {
            let htmlcon=``;
            $.each(datas,function (index,info) {
                htmlcon+=`姓名：`+info[`name`]+`<br/>`;
                htmlcon+=`性别：`+info[`sex`]+`<br/>`;
                htmlcon+=`电邮：`+info[`email`]+`<br/><br/>`;
            })
            $(`#jsons`).html(htmlcon);
        })
    })
})


</script>
</body>
</html>
